import React from "react";
import {
  Button,
  Form,
  Input,
  DatePicker,
  Table,
  Switch,
  message,
  Spin,
} from "antd";
import {
  PlusOutlined,
  DeleteOutlined,
  SearchOutlined,
  EditOutlined,
} from "@ant-design/icons";
import "./index.css";
//引入添加商品的api
import * as http from "@/api/product";
// import Dialog from "@/components/ProductManagement/Dialog";
class ProductList extends React.Component {
  constructor() {
    super();
    let _this = this;
    this.rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      getCheckboxProps: (record) => ({
        disabled: record.name === "Disabled User", // Column configuration not to be checked
        name: record.name,
      }),
    };
    this.state = {
      dialogVisible: false,
      actionType: "添加商品",
      tableLoading: true,
      columns: [
        {
          title: "商品编号",
          dataIndex: "product_id",
          align: "center",
        },
        {
          title: "商品名称",
          dataIndex: "productName",
          align: "center",
        },
        {
          title: "商品价格",
          dataIndex: "price",
          align: "center",
        },
        {
          title: "是否上架",
          dataIndex: "onSell",
          align: "center",
          render(switched, row) {
            return (
              <Switch
                onChange={_this.sellSwitchChange.bind(_this, row, switched)}
              />
            );
          },
        },
        {
          title: "加入时间",
          dataIndex: "updateTime",
          align: "center",
        },
        {
          title: "操作",
          dateIndex: "operation",
          align: "center",
          render(row) {
            return (
              <div className="action_button">
                <Button
                  type="primary"
                  onClick={_this.edit.bind(_this, row)}
                  icon={<EditOutlined />}
                ></Button>
                <Button
                  type="primary"
                  onClick={_this.delete.bind(_this, row)}
                  danger
                  icon={<DeleteOutlined />}
                ></Button>
              </div>
            );
          },
        },
      ],
      dataSource: [],
    };
  }
  //是否上架切换按钮
  sellSwitchChange(row, switched) {
    console.log(row);
  }
  // 选择日期时触发的事件
  onDateChange() {}
  //编辑按钮
  edit(row) {
    console.log(row);
  }
  //删除按钮
  delete(row) {
    console.log(row);
  }
  //添加按钮
  addProduct() {
    this.setState({
      dialogVisible: true,
    });
  }

  //渲染表格数据

  updateProductList(product_id = "") {
    http.getProduct(product_id).then((res) => {
      // console.log(res)
      this.setState({
        //关闭表格的加载
        tableLoading: false,
      });
      if (res.data.state) {
        //映射处理之后的数据,加了key字段
        let dataSource = res.data.data.map((item) => {
          return {
            key: item.product_id,
            ...item,
          };
        });

        //获取成功
        this.setState({
          dataSource,
        });
      }
    });
  }

  componentDidMount() {
    //组件挂载之后
    this.updateProductList();
  }

  //dialog完成的时候 添加商品
  handleAddProduct(param) {
    console.log(param);
    http.addProduct(param).then((res) => {
      // console.log(res)
      if (res.data.state) {
        //添加成功
        //关闭dialog
        this.hideDialog();
        //更新表格
        this.updateProductList();
      } else {
        message.error(res.data.msg);
      }
    });
  }

  //关闭dialog
  hideDialog() {
    this.setState({
      dialogVisible: false,
    });
  }
  render() {
    return (
      <div className="list_container">
        {/* <Dialog
          onCancel={this.hideDialog.bind(this)}
          onAddProduct={this.handleAddProduct.bind(this)}
          dialogVisible={this.state.dialogVisible}
          actionType={this.state.actionType}
        ></Dialog> */}
        <div className="tip">
          <p className="tip_top">操作提示</p>
          <ul>
            <li>1.该页展示了商城所有的商品信息,可对商品进行修改操作</li>
            <li>2.商家添加商品后,需要耍新页面才能看到最新商品</li>
          </ul>
        </div>
        {/* 中间操作部分 */}
        <div className="operation">
          <div className="button">
            <Button
              type="primary"
              onClick={this.addProduct.bind(this)}
              icon={<PlusOutlined />}
            >
              添加商品
            </Button>
            <Button type="primary" danger icon={<DeleteOutlined />}>
              批量删除
            </Button>
          </div>
          <div className="search">
            <Form>
              <Form.Item label="商品内容">
                <Input placeholder="商品名称/编号" />
              </Form.Item>
              <Form.Item label="添加时间">
                <DatePicker
                  placeholder="选择日期"
                  onChange={this.onDateChange.bind(this)}
                />
              </Form.Item>
              <Button icon={<SearchOutlined />} type="primary">
                查询
              </Button>
            </Form>
          </div>
        </div>
        {/* 表格部分 */}
        <div className="table">
          <Table
            loading={this.state.tableLoading}
            bordered
            rowSelection={this.rowSelection}
            columns={this.state.columns}
            dataSource={this.state.dataSource}
          ></Table>
        </div>
      </div>
    );
  }
}

export default ProductList;
